<template>

  <div>
    <!--   导航   -->
    <div id="nav">
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <!--      <router-link class="router-link" to="/home" active-class="current">首页</router-link>-->
      <!--      <router-link class="router-link" to="/mine" active-class="current">我的</router-link>-->

      <router-link class="router-link" to="/home">首页</router-link>
      <router-link class="router-link" to="/mine">我的</router-link>
      <router-link class="router-link" :to="'/news/' + newsId ">新闻</router-link>    <!--  动态绑定  -->
      <router-link class="router-link" :to="circleQueryParam">圈子</router-link>      <!--  绑定参数值 -->
    </div>

    <div>
      <button class="router-link" @click="home">首页</button>
      <button class="router-link" @click="mine">我的</button>

      <button class="router-link" @click="news">新闻</button>
      <button class="router-link" @click="circle">圈子</button>
    </div>

    <!--   展示  -->
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->

    <!--  这里是 vue2 中的写法  -->
<!--    <keep-alive>-->
<!--      <router-view></router-view>-->
<!--    </keep-alive>-->

    <!--  在 angular 中叫做路由复用，这里是叫做 keep alive  -->
<!--    <router-view v-slot="{Component}">-->
<!--      <keep-alive :exclude="['News','Circle']">-->
<!--        <component :is="Component"></component>-->
<!--      </keep-alive>-->
<!--    </router-view>-->

    <router-view v-slot="{Component}">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
    </router-view>

  </div>

</template>

<script setup>
// 引入路由对象
import {useRouter} from "vue-router";

// 引入 router.js
// import router from './router/index'; 可以简写为下面的写法
import router from './router';

import {ref, reactive} from 'vue';
const newsId = ref('0001');
const vueRouter = useRouter();

const circleQueryParam = reactive({path: '/circle', query: {name: 'baidu', site: 'baidu.com'}});

/*   按钮跳转  */
// 跳转到首页
const home = () => {
  // push -->  pushState
  // router.push('/home');
  router.replace('/home');
}


const mine = () => {
  // router.push('/mine');
  router.replace('/mine');
}

/***  通过事件传值方式   ***/
const news = () => {
  // 通过事件传值
  vueRouter.push('/news/'+newsId.value);
}

const circle = () => {
  // push -->  pushState
  // router.push('/home');
  vueRouter.replace(circleQueryParam);
}
</script>


<style scoped>
.router-link {
  margin-right: 10px;
}

.router-link-active {
  font-size: 1.2em;
  font-weight: bolder;
  color: blue;
}

.current {
  font-size: 1.2em;
  font-weight: bolder;
  color: orangered;
}
</style>
